<template>
	<view class="content">
		<!-- <view class="fault">
			<view class="fault-1">
				<view class="fault-1-1">
					<view class="faultTo">{{totalFaul}}</view>
					<view style="color:#999696;font-size: 22rpx;">待维修</view>
				</view>
				<view class="fault-1-1">
					<view class="faultTo">{{totalMaintenance}}</view>
					<view style="color:#999696;font-size: 22rpx;">维保</view>
				</view>
				<view style="flex: 1;margin: auto;text-align: center;padding: 10px 0;">
					<view class="faultTo">{{totalPatrol}}</view>
					<view style="color:#999696;font-size: 22rpx;">带巡查</view>
				</view>
			</view>
		</view> -->
		<!-- 菜单栏 -->
		<view style="margin: 40rpx 0;">
			<view style="display: flex; align-items: center; justify-content: space-evenly;">
				<!-- 车辆信息 -->
				<view style="background-color:#fff;width: 330rpx;height: 180rpx;display: flex;">
					<view style="width: 80rpx;margin: auto;margin-left: 30rpx;
					display: flex; align-items: center; justify-content: center;">
						<image src="../../static/oilTank.png" style="width: 80rpx;height: 90rpx;"></image>
					</view>
					<view style="margin: auto;padding: 10px 0;width: 100rpx;text-align: center;">
						<view style="margin-bottom: 20rpx;color: #999696;">油罐</view>
						<view style="font-size: 22rpx;font-size: 32rpx;font-weight: bold;color: #484646;">{{tankInfoCount}}</view>
					</view>
				</view>
				<!-- 生产监控 -->
				<view style="background-color:#fff;width: 330rpx;height: 180rpx;display: flex;">
					<view style="width: 80rpx;margin: auto;margin-left: 30rpx;
					display: flex; align-items: center; justify-content: center;">
						<image src="../../static/device.png" style="width: 70rpx;height: 80rpx;"></image>
					</view>
					<view style="margin: auto;padding: 10px 0;width: 100rpx;text-align: center;">
						<view style="margin-bottom: 20rpx;color: #999696;">设备</view>
						<view style="font-size: 22rpx;font-size: 32rpx;font-weight: bold;color: #484646;">{{deviceInfoCount}}</view>
					</view>
				</view>
			</view>
			<view style="display: flex; align-items: center; justify-content: space-evenly;margin-top: 30rpx;">
				<!-- 设备维护 -->
				<view style="background-color:#fff;width: 330rpx;height: 180rpx;display: flex;">
				<view style="width: 80rpx;margin: auto;margin-left: 30rpx;display: flex; align-items: center; justify-content: center;">
					<image src="../../static/传感器.png" style="width: 70rpx;height: 80rpx;"></image>
				</view>
					<view style="margin: auto;padding: 10px 0;width: 100rpx;text-align: center;">
						<view style="margin-bottom: 20rpx;">传感器</view>
						<view style="font-size: 22rpx;font-size: 32rpx;font-weight: bold;color: #484646;">0</view>
					</view>
				</view>
				<!-- 我的任务 -->
				<view style="background-color:#fff;width: 330rpx;height: 180rpx;display: flex;">
					<view style="width: 80rpx;margin: auto;margin-left: 30rpx;display: flex; align-items: center; justify-content: center;">
						<image src="../../static/公司.png" style="width: 75rpx;height: 80rpx;"></image>
					</view>
					<view style="margin: auto;padding: 10px 0;width: 100rpx;text-align: center;">
						<view style="margin-bottom: 20rpx;">公司</view>
						<view style="font-size: 22rpx;font-size: 32rpx;font-weight: bold;color: #484646;">{{sysCompanyCount}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view style="margin-top: 180px;">
			<view style="display: flex;align-items: center; justify-content: space-evenly;width: 100%;margin-bottom: 20rpx;" class="loginButton">
				<button class="loginButton-1" hover-class="hover-class-bg" style="width: 330rpx;" @click="storageTankManageClick()">储罐管理</button>
				<button class="loginButton-1" hover-class="hover-class-bg" style="width: 330rpx;" @click="communicationClick()">通信设备</button>
			</view>
			<view style="display: flex;align-items: center; justify-content: space-evenly;width: 100%;margin-bottom: 20rpx;" class="loginButton">
				<button class="loginButton-1" hover-class="hover-class-bg" style="width: 330rpx;" @click="valueMaintenanceClick()">采集值维护</button>
				<button class="loginButton-1" hover-class="hover-class-bg" style="width: 330rpx;" @click="manageClick()">系统管理</button>
			</view>
		</view>
		<!-- 退出登录 -->
		<view style="margin-top: 20px;overflow: hidden;margin-right: 25rpx;">
			<view class="exitClass" @click="downExit()">
				<image src="../../static/down.png" style="width: 50rpx;height: 50rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				totalFaul:'',//维修
				totalMaintenance:'',//维保
				totalPatrol:'',//巡查
				tankInfoCount:0,
				deviceInfoCount:0,
				sysCompanyCount:0,
			}
		},
		methods: {
			storageTankManageClick(){//储罐设备
				uni.switchTab({
					url:'/pages/home/storageTankManage'
				})
			},
			communicationClick() { //通信设备
				uni.switchTab({
					url:'/pages/home/communicationDevices'
				})
			},
			valueMaintenanceClick(){//采集值维护
				uni.switchTab({
					url:'/pages/home/maintenance'
				})
			},
			manageClick(){
				uni.switchTab({
					url:'/pages/home/manage'
				})
			},
			
			// 退出登录
			downExit(){
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '是否确定退出登录？',
					cancelText: "确认", // 取消按钮的文字  
					confirmText: "取消", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击取消');
						} else if (res.cancel) {
							console.log('用户点击确定');
							that.logout()
						}
					}
				});
			},
			logout(){
				uni.showLoading({title:'正在退出登录',mask: true})
				this.$http.post('/api/user/logout',{}, true).then(res => {
					console.log(res)
					if(res.success == true){
						uni.clearStorageSync();
						uni.reLaunch({
							url:'../index/login'
						})
					}else{
						uni.showToast({ title: res.msg, icon: 'none' });
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({title: err.msg,icon: 'none'});
				})
			},
			
		},
		onLoad(e) { //页面加载完执行
			// 油罐
			this.$http.get('/api/v1/tankInfo/count',{}, true).then(res => {
				if (res.data.count) {
					this.tankInfoCount = res.data.count
				} else {
					uni.showToast({title: res.msg,icon: 'none'});
				}
			}).catch(err => {
				uni.showToast({title: err.msg,icon: 'none'});
			})
			// 设备
			this.$http.get('/api/v1/deviceInfo/count',{}, true).then(res => {
				if (res.data.count) {
					this.deviceInfoCount = res.data.count
				} else {
					uni.showToast({title: res.msg,icon: 'none'});
				}
			}).catch(err => {
				uni.showToast({title: err.msg,icon: 'none'});
			})
			// 公司
			this.$http.get('/api/v1/sysCompany/count',{}, true).then(res => {
				if (res.data.count) {
					this.sysCompanyCount = res.data.count
				} else {
					uni.showToast({title: res.msg,icon: 'none'});
				}
			}).catch(err => {
				uni.showToast({title: err.msg,icon: 'none'});
			})
		},
		onShow() { //每次进入页面执行

		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #fff;
	}

	.content {
		font-size: 14px;
		line-height: 24px;
		height: 100%;
		overflow-y: scroll;
		background-color: #EAEAEA;

		.fault {
			width: 100%;
			height: 260rpx;
			background-image: linear-gradient(to top, #9AC5E5 0%, #8BE8D6 60%, #9AC5E5 100%);
			border-radius: 0 0 50rpx 50rpx;

			.fault-1 {
				position: relative;
				width: 680rpx;
				height: 180rpx;
				background-color: #F4FDFB;
				margin: auto;
				border-radius: 20rpx;
				top: 40rpx;
				display: flex;

				.fault-1-1 {
					flex: 1;
					border-right: 2px #9AC5E5 solid;
					margin: auto;
					text-align: center;
					padding: 10px 0;
				}
			}
		}
     .exitClass{
		 width: 70rpx;height: 70rpx;border-radius: 80rpx;
		 background-color: #C51414;float: right;display: flex; align-items: center; justify-content: center;
	 }
		.faultTo {
			color: #EE457A;
			font-size: 42rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.loginButton {
			button::after {
				border: none;
			}
			.loginButton-1 {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 5rpx;
				color: #ffffff;
				font-size: 28rpx;
				font-weight: bold;
				background-color: #589EF8;
			}
			.hover-class-bg {
				background: #999999 !important;
			}
		}
		
	}
</style>